import React, { Component } from "react";
import {
    Card,
    Button,
    Table,
    Modal,
    message
} from 'antd'

import AddForm from './add-form'
import AuthForm from './auth-form'

import { reqRoles, reqAddRole, reqUpdateRole } from '../../api'
import memoryUtils from '../../utils/memoryUtils'
import storageUtils from '../../utils/storageUtils'

import { formateDate } from '../../utils/dateUtils'
/**
 * 角色管理
 */
export default class Role extends Component {
    constructor(props) {
        super(props);
        this.addForm = React.createRef();
        this.auth = React.createRef();
    }
    // 只要更新状
    state = {
        roles: [], // 所有角色的列表
        role: {}, // 选中的role
        isShowAdd: false, // 是否显示添加界面
        isShowAuth: false, // 是否显示设置权限界面
    }
    // 初始化Table列的数组
    initColums = () => {
        this.columns = [
            {
                title: '角色名称',
                dataIndex: 'name',
                key: 'name',
            },
            {
                title: '创建时间',
                dataIndex: 'create_time',
                key: 'create_time',
                render: (create_time) => formateDate(create_time)
            },
            {
                title: '授权时间',
                dataIndex: 'auth_time',
                key: 'auth_time',
                render: formateDate
            },
            {
                title: '授权人',
                dataIndex: 'auth_name',
                key: 'auth_name',
            }
        ];
    }

    // 获取所有角色列表
    getRoles = async () => {
        const result = await reqRoles()
        if (result.status === 0) {
            const roles = result.data
            this.setState({
                roles
            })
        }
    }

    /**
     * 添加角色
     */
    addRole = () => {

        // 进行表单验证
        let form = this.addForm.current.refs.form;

        // antd v4
        form.validateFields().then(async values => {

            //隐藏确认框
            this.setState({
                isShowAdd: false
            })

            // 收集数据, 并提交添加分类的请求
            const { roleName } = values
            //console.log(values);

            // 清除输入数据
            form.resetFields()

            // 请求添加
            const result = await reqAddRole(roleName)
            // 根据结果提示/更新列表显示
            if (result.status === 0) {
                message.success('添加角色成功')
                // this.getRoles()
                // 新产生的角色
                const role = result.data

                // 更新roles状态: 基于原本状态数据更新（函数的写法）
                this.setState(state => ({
                    roles: [...state.roles, role]
                }))

                // 传对象的写法（替换原来的role）
                // this.setState({roles})

            } else {
                message.success('添加角色失败')
            }

        }).catch(error => {
            console.log(error);
        });
        // 收集输入的数据

        // 请求添加

        // 根据返回的结果进行提示
    }

    /**
     * 更新角色
     */
    updateRole = async () => {

        // 隐藏确认框
        this.setState({
            isShowAuth: false
        })

        const role = this.state.role

        // 得到最新的menus
        const menus = this.auth.current.getMenus()
        role.menus = menus
        role.auth_time = Date.now()
        role.auth_name = memoryUtils.user.username

        const result = await reqUpdateRole(role);

        if (result.status === 0) {
            // 如果当前更新的是自己角色的权限, 强制退出
            if (role._id === memoryUtils.user.role_id) {
                memoryUtils.user = {}
                storageUtils.removeUser()
                this.props.history.replace('/login')
                message.success('当前用户角色权限成功')
            } else {
                message.success('设置角色权限成功')
                this.setState({
                    roles: [...this.state.roles]
                })
            }
        }
    }

    onRow = (role) => {
        return {
            onClick: event => { // 点击行
                console.log('row onClick()', role)
                // alert('点击行')
                this.setState({
                    role
                })
            },
        }
    }

    componentWillMount() {
        this.initColums()
    }

    componentDidMount() {
        this.getRoles()
    }

    // 根据新传入的role来更新checkedKeys状态
    // 当组件接收到新的属性时，在render之前，自动调用
    componentWillReceiveProps(nextProps) {

        console.log("componentWillReceiveProps()", nextProps);
        const menus = nextProps.role.menus;
        this.setState({
            checkedKeys: menus
        })
    }

    render() {
        console.log("AuthForm Render");
        const { roles, role, isShowAdd, isShowAuth } = this.state
        const title = (
            <span>
                <Button type="primary" onClick={() => this.setState({ isShowAdd: true })}>创建角色</Button>&nbsp;&nbsp;
                <Button type="primary" disabled={!role._id} onClick={() => this.setState({ isShowAuth: true })}>设置角色权限</Button>
            </span>
        )

        return (
            <Card title={title}>
                <Table
                    dataSource={roles}
                    columns={this.columns}
                    bordered
                    rowKey="_id"
                    pagination={{ defaultPageSize: 3 }}
                    rowSelection={{
                        type: 'radio',
                        selectedRowKeys: [role._id],
                        onSelect: (role) => { // 选择某个radio时回调
                            this.setState({
                                role
                            })
                        }
                    }}
                    onRow={this.onRow}
                />

                <Modal
                    title="添加角色"
                    visible={isShowAdd}
                    onOk={this.addRole}
                    onCancel={() => {
                        this.setState({ isShowAdd: false })
                        this.form.resetFields()
                    }}
                >
                    <AddForm
                        ref={this.addForm}
                        setForm={(form) => this.form = form}
                    />
                </Modal>

                <Modal
                    title="设置角色权限"
                    visible={isShowAuth}
                    onOk={this.updateRole}
                    onCancel={() => {
                        this.setState({ isShowAuth: false })
                    }}
                >
                    <AuthForm ref={this.auth} role={role} />
                </Modal>
            </Card>

        );
    }
}